<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增摄像头图片信息')" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
    <!-- <th:block th:include="include :: layui-css" /> -->
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-aiImg-add">
			<div class="form-group">	
				<label class="col-sm-3 control-label">摄像头编码：</label>
				<div class="col-sm-8">
					<input id="cameraCode" name="cameraCode" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">图片上传：</label>
				<div class="col-sm-8">
					<input id="path" name="path" class="form-control" type="hidden">
					<div class="file-loading">
						<input id="file" name="file" class="file" type="file" data-min-file-count="1" data-theme="fas">
					</div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">确认状态：</label>
				<div class="col-sm-8">
					<!-- <input id="confirmState" name="confirmState" class="form-control" type="text"> -->
					<label class="radio check-box"><input type="radio" checked value="0" name="confirmState"> <i></i> 未确认</label>
					<label class="radio check-box"><input type="radio" value="1" name="confirmState"> <i></i> 已确认</label>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">识别结果：</label>
				<div class="col-sm-8">
					<!-- <input id="distinguish" name="distinguish" class="form-control" type="text"> -->
					<label class="radio check-box"><input type="radio" checked value="0" name="distinguish"> <i></i> 确认警告</label>
					<label class="radio check-box"><input type="radio" value="1" name="distinguish"> <i></i> 识别错误</label>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">创建时间：</label>
				<div class="col-sm-8 input-group date">
					<!-- <input id="createTime" name="createTime" class="form-control" type="text"> -->
					<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    <input type="text" class="form-control" id="createTime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off">
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script type="text/javascript">
		var prefix = ctx + "door/aiImg"
		$("#form-aiImg-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			},
			focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/add", $('#form-aiImg-add').serialize());
	        }
	    }
		
		var fileConfig=[];
		// 图标上传
		$("#file").fileinput({
			'theme': 'explorer-fas',
			'uploadUrl': ctx+'common/upload',
			showPreview: true,
			showUpload: false,
			showRemove: false,
			showCancel: false,
			showUploadedThumbs: false,
			showClose: false,
			overwriteInitial: false,
			dropZoneTitle:'上传图片',
			initialPreviewAsData: true,
		})
		$("#file").on("filebatchselected", function(event, files) {
			$("#file").fileinput("upload");
		}).on("fileuploaded", function (event, data,previewId) {
			$("#path").val(data.response.fileName);
			fileConfig=[];
			fileConfig.push({fileName:data.response.fileName,key:previewId})
		}).on('filesuccessremove', function (event, previewId, extra) {
			for(var i=0,j=fileConfig.length;i<j;i++){
				if(previewId==fileConfig[i].key){
					fileConfig.splice(i,1);
					break;
				}
			}
			$("#path").val("");
		});

		// 日期
		layui.use('laydate', function(){
			var laydate = layui.laydate;
			laydate.render({ 
				elem: '#createTime',
				type: 'datetime',
				trigger: 'click'
			});
		})
	</script>
</body>
</html>
